<template >
   <div class="last_boot">
        <div class='boolk_info' v-for='(item,index) in recordlist' :key='index'>
            <div class='number'>
              {{ index +1 }}
            </div>
            <div class='imgs'>
              <img v-if='item.封面' class='imgsin' :src="`http://192.168.0.221/newebook/showImage.do?ruid=${item.封面}`"  />
              <span>推购指数{{ item.荐购次数|| 0 }}</span>
            </div>

            <div class='name_info'>
            <h1>{{ item.题名 }}</h1>
            <div class='xininfo'>
              <span> 作者：<a> {{ item.责任者 }} </a> </span>
            </div>
            <div class='xininfo'>
               <span> 出版社：<a> {{ item.出版社 }} </a> </span>
               <span v-if='item.出版时间'> 出版年：<a > {{ item.出版时间 | Dts }} </a> </span>
            </div>
             <div class='xininfo'>
                <span> ISBN：{{ item.ISBN }}</span>
               <span v-if='item.主题'> 主题词：<a> {{ item.主题 }} </a> </span>
            </div>
             <div class='xininfo'>
                <span> 页码：{{ item.dmcode }} </span>  
            </div>
          <div class='reading'> 在线阅读 </div>
            </div>
          </div>
   </div>
</template>

<script>
export default {
   name:'Infocount',
   data(){
      return {

      }
   },
   props:{
      recordlist:{
         type:Array,
         default:() => []
      }
   },
   filters: {
    Dts(dates) {
      return dates.substring(0, 4);
    },
  },
}
</script>
<style lang='scss' scoped>
 .boolk_info {
        display: flex;
        margin-top: 20px;

        .imgs {
          display: flex;
          width: 132px;
          flex-direction: column;

          margin-left: 10px;
          .imgsin {
            width: 100%;
          }
        }
        .name_info {
          margin-left: 10px;
        }
      }

</style>